<template>
	<view class="makerElite">
		<navBar isBack backColor="#fff" title="分销精英" color="#fff" background="transparent"></navBar>
		<view class="mE_topImg">
			<image src="https://manager.ryz1620.com/static/distri/makerCenter/bg.png" mode=""></image>
			<!-- 创客精英 -->
			<view class="mE_remoElite">
				<view class="mE_nowRatio">
					{{maker_num}}人
					<view class="mE_nowRatioItem">
						<image src="https://manager.ryz1620.com/static/distri/fenxiao/makerEli2.png" mode=""></image>
						分销精英
					</view>
				</view>
				<!-- 移除精英按钮 -->
				<view class="mE_remoBtn" @click="_removeElite">
					<image v-if="!removeE" src="https://manager.ryz1620.com/static/distri/fenxiao/removeEli2.png" mode=""></image>
					<image v-else src="https://manager.ryz1620.com/static/distri/fenxiao/removeNot.png" mode=""></image>
					{{removeText}}
				</view>
			</view>
		</view>
		
		
		
		
		<!-- 精英列表 -->
		<view class="mE_eliteList" :style="'margin-top:'+navHeight+'rpx;'" :class="{'active':!removeE}">
			<view class="mE_eliteItem" v-for="(item,index) in eliteList" :key='index'>
				<view class="mE_itemUser">
					<view class="mE_userImg">
						<image :src="item.headimg" mode=""></image>
						<image v-if="item.level==2" src="https://manager.ryz1620.com/static/distri/fenxiao/gold.png" mode=""></image>
						<image v-else-if="item.level==1" src="https://manager.ryz1620.com/static/distri/fenxiao/silver.png" mode=""></image>
						<image v-else="item.level==3" src="https://manager.ryz1620.com/static/distri/fenxiao/copper.png" mode=""></image>
						
					</view>
					<view class="mE_userName">
						<span>{{item.realname?item.realname:item.nickname}}</span>
						<view class="">
							推荐订单：{{item.finish_order_num?item.finish_order_num:0}}
						</view>
						创建时间：{{$utils.getFormatDate(item.create_time*1000,'yyyy-MM-dd hh:mm')}}
					</view>
				</view>
				<view class="mE_itemRigth" v-if="!removeE">
					<span>{{item.finish_sell_price?item.finish_sell_price:0}}</span>
					销售金额
				</view>
				<view v-else>
					<checkbox-group name="" @change="_changeCheck(index)">
						<label>
							<checkbox value="" :checked="item.checked" color="#DBA954"/>
						</label>
					</checkbox-group>
				</view>
			</view>
			<u-loadmore :status="statusLoading" :icon-type="iconType" :load-text="loadText" />
		</view>
		
		<view class="mE_removeSubmit" v-if="removeE">
			<view @click="_removeFn">移除</view>
		</view>
		
		<!-- /遮罩是否确认移除 -->
		<view class="mE_btnShadow" v-if="openBtnShadow">
			<view class="mE_btnContent">
				<h3>确定要移除这些人员吗</h3>
				<view class="mE_btn">
					<view @click="_cancelFn">取消</view>
					<view @click="_deterFn" class="mE_btn2">确认</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import navBar from '@/components/navBar/navBar.vue';
	import service_distri from '@/service/distri.js'
	export default{
		components:{
			navBar
		},
		data(){
			return{
				statusLoading: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了~'
				},
				removeE:false,//是否点击移除精英按钮
				removeText:'移除精英',
				openBtnShadow:false,//开启遮罩
				page:1,
				pagesize:10,
				eliteList:[],
				maker_num:null,
				navHeight:200,
			}
		},
		onLoad(options) {
			this.navHeight = 470 - Number(this.$store.state.system.navBarHeight)*2
			this.maker_num = options.makerNum
			this.getPromoter()
		},
		onReachBottom() {
			this.page++
			service_distri.get_promoterList({page:this.page,pagesize:this.pagesize}).then(res=>{
				console.log(res)
				if(res.code==1){
					if(!res.data.list.length){
						this.statusLoading = 'nomore'
					}else{
						this.statusLoading = 'loading'
					}
					this.eliteList = this.eliteList.concat(res.data.list)
				}
			})
		},
		methods:{
			// 获取创客精英
			getPromoter(){
				this.page=1
				uni.showLoading({
					title:'加载中...'
				})
				service_distri.get_promoterList({page:this.page,pagesize:this.pagesize}).then(res=>{
					console.log(res)
					if(res.code==1){
						if(res.data.list.length<10){
							this.statusLoading = 'nomore'
						}
						this.eliteList = res.data.list?res.data.list:[]
					}
				})
				uni.hideLoading()
			},
			
			//点击移除精英按钮
			_removeElite(){
				if(!this.removeE){
					this.removeE = true
					this.removeText = '取消移除'
				}else{
					this.removeE = false
					this.removeText = '移除精英'
				}
			},
			
			//
			_changeCheck(index){
				console.log(index)
				if(!this.eliteList[index].checked){
					this.eliteList[index].checked = true
				}else{
					this.eliteList[index].checked = false
				}
				
			},
			
			//点击最下方移除按钮
			_removeFn(){
				let everyItem = this.eliteList.every(item=>!item.checked)
				if(everyItem){
					uni.showToast({
						title:"请选择要移除人员",
						icon:"none"
					})
				}else{
					this.openBtnShadow = true; //开启遮罩
				}
			},
			
			//点击取消
			_cancelFn(){
				this.openBtnShadow = false;
			},
			
			//点击确定
			_deterFn(){
				let arr = [];
				this.eliteList.map(item=>{
					if(item.checked){
						arr.push(item.id)
					}
				})
				console.log(arr)
				let ids = arr.join(',')
				service_distri.removeRelieve({ids}).then(res=>{
					if(res.code == 1){
						this.getPromoter()
						uni.showToast({
							title:'移除成功',
							icon:'success'
						})
						this.openBtnShadow = false
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			}
				
				
		}
	}
</script>

<style lang="scss" scoped>
	.makerElite{
		padding-bottom: constant(safe-area-inset-bottom);///兼容 IOS<11.2/
		padding-bottom: env(safe-area-inset-bottom);///兼容 IOS>11.2/
		.mE_topImg{width: 100%;height: 430rpx;position: absolute;top: 0;left: 0;z-index: 0;image{width: 100%;height: 100%;}}
		// 创客精英
		.mE_remoElite{
			width: 100%;
			position: absolute;
			z-index: 2;
			padding: 0 24rpx 0 36rpx;
			bottom: 60rpx;
			left: 0;
			display: flex;
			align-items: center;
			// margin-top: 78rpx;
			justify-content: space-between;
			.mE_nowRatio{
				font: 500 60rpx/52rpx PingFang SC;
				color: #fff;
				.mE_nowRatioItem{
					margin-top: 20rpx;
					display: flex;
					font: 500 30rpx/40rpx PingFang SC;
					image{
						width: 40rpx;
						height: 40rpx;
						margin-right: 16rpx;
					}
				}
			}
			.mE_remoBtn{
				width: 160rpx;
				height: 52rpx;
				border: 2rpx solid #FFFFFF;
				border-radius: 26rpx;
				image{width: 32rpx;height: 32rpx;}
				padding: 0 16rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font: 400 22rpx/52rpx PingFang SC;
				color: #fff;
			}
		}
		
		//精英列表
		.mE_eliteList{
			width: 702rpx;
			// height: 946rpx;
			margin: 0 auto 140rpx;
			background-color: #fff;
			border-radius: 16rpx;
			padding: 10rpx 24rpx 10rpx 24rpx;
			.mE_bor{border: 0;}
			.mE_eliteItem{
				padding: 30rpx 0 28rpx 0;
				display: flex;
				margin-bottom: 20rpx;
				align-items: center;
				justify-content: space-between;
				border-bottom: 2rpx solid #F4F4F4;
				.mE_itemUser{
					.mE_userImg{
						position: relative;
						width: 96rpx;
						height: 96rpx;
						margin-right: 24rpx;
						image:nth-of-type(1){width: 96rpx;height: 96rpx;}
						image:nth-of-type(2){width: 28rpx;height: 28rpx;position: absolute;bottom: 0;right: 0rpx;}
					}
					display: flex;
					align-items: center;
					.mE_userName{
						display: flex;
						flex-direction: column;
						font: 400 22rpx/36rpx PingFang SC;
						color: #A0A0A0;
						span{font: 600 26rpx/40rpx PingFang SC;color: #0A0605;margin-bottom: 12rpx;}
					}
				}
				.mE_itemRigth{
					display: flex;
					flex-direction: column;
					font: 400 22rpx/40rpx PingFang SC;
					color: #A0A0A0;
					text-align: right;
					span{font-size: 40rpx; color: #EFB82F; font-weight: 500;}
				}
			}
		}
		.active{
			margin-bottom: 30rpx;
		}
		
		//最后的移除按钮 
		.mE_removeSubmit{
			width: 100%;
			height: 120rpx;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			z-index: 5;
			left:0;
			padding: 20rpx 76rpx 0 76rpx;
			height: calc(120rpx+ constant(safe-area-inset-bottom));///兼容 IOS<11.2/
			height: calc(120rpx + env(safe-area-inset-bottom));///兼容 IOS>11.2/
			padding-bottom: constant(safe-area-inset-bottom);///兼容 IOS<11.2/
			padding-bottom: env(safe-area-inset-bottom);///兼容 IOS>11.2/
			view{
				width: 606rpx;
				height: 80rpx;
				text-align: center;
				background-color: #DBA954;
				border-radius: 46rpx;
				font: 600 32rpx/80rpx PingFang SC;
				color: #fff;
			}
		}
		
		//遮罩
		.mE_btnShadow{
			width: 100%;
			height: 100%;
			position: fixed;				
			z-index: 10;
			top: 0;
			left: 0;
			text-align: center;
			background-color: rgba(0,0,0,0.6);
			.mE_btnContent{
				width: 528rpx;
				height: 260rpx;
				background-color: #fff;
				border-radius: 8rpx;
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				margin: auto;
				padding: 40rpx 48rpx;
				h3{font: 600 30rpx/40rpx PingFang SC; color:#292A2B;}
				.mE_btn{
					margin-top: 74rpx;
					display: flex;
					justify-content: space-between;
					view{
						width: 196rpx;
						height: 64rpx;
						border-radius: 32rpx;
						background-color: #F5F5F5;
						font: 400 26rpx/64rpx PingFang SC; 
						color:#0A0605;
					}
					.mE_btn2{
						background-color: #EBB964;
						color: #fff;
					}
				}
			}
		}
	}
</style>
